<template>
  <div>
    <h3>拖拽-列表排序</h3>
    <div id="example1">
      <div v-for="item in listData" :key="item.id" class="item">{{ item.name }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Sortable from "sortablejs";
// import { ref, onMounted } from "vue";
import { useGlobalStore } from "@/store/index";

console.log('useGlobalState',useGlobalStore());
const listData = ref<
  {
    id: number;
    name: string;
  }[]
>();

onMounted(() => {
  const el = document.getElementById("example1") as HTMLElement;
  listData.value = [
    {
      id: 1,
      name: "1",
    },
    {
      id: 2,
      name: "2",
    },
    {
      id: 3,
      name: "3",
    },
    {
      id: 4,
      name: "4",
    },
    {
      id: 5,
      name: "5",
    },
    {
      id: 6,
      name: "6",
    },
  ];

  if (el) {
    const sortable = new Sortable(el, {
      animation: 150,
      ghostClass: "blue-background-class",
      onEnd(event) {
        console.log("onEnd", event);
        const { oldIndex = 0, newIndex = 0 } = event;
        const arr = [...listData.value!];
        [arr[oldIndex], arr[newIndex]] = [arr[newIndex], arr[oldIndex]];

        listData.value = arr;
        console.log("d", listData.value);
      },
    });
    console.log('sortable',sortable);
  }
});
</script>

<style lang="css" scoped>

.item {
  height: 56px;
  margin-bottom: 4px;
  background-color: #d6e2fb;
  border-radius: 10px;
  line-height: 56px;
  font-size: 20px;
  color: white;
  padding-inline: 10px;
}</style>